<template>
	<view class="">
		<view>
			<uv-tabs :list="data.itemList" @click="clickList" lineWidth="30"
				:activeStyle="{ color: '#333', fontSize: '30rpx' }"
				:inactiveStyle="{ color: '#909090', fontSize: '30rpx' }" :scrollable="false" lineColor="#7B7C7B"
				:current="data.kindIndex"></uv-tabs>
		</view>
		<view class="plr-24">
			<view class="listClass" v-if="data.list.length  > 0  && data.kindIndex != 2">
				<view v-for="(item, index) in data.list" :key="index" 
				@click="addOpen(`/pages/mine/veinManDetails?flag=hot2&user=`+item.id)"
					class="itemClass pointer relative radius-16 hidden">
					
					<view class="flex" style="width: 315rpx;height: 420rpx;">
						<!-- <image :src="(item.imgUrl?item.imgUrl: item.synthesisImg)" mode="aspectFit"   style=" max-width: 100%;max-height: 100%;"></image> -->
						<image :src="(item.imgUrl?item.imgUrl: item.synthesisImg)" mode="aspectFill" style=" max-width: 100%;max-height: 100%;"></image>
					</view>
					<view class="bgMinor5 flex pd-16">
						<view class="flex flex-1">
							<uv-image :src="item.avatar" width="32rpx" height="32rpx"
								shape="circle"></uv-image>
							<view class="size-15 ml-16 color-black3 line-hiding-1 flex-1">{{item.realname}}</view>
						</view>
						<view class="flex" @click="addOpen(`/pages/homepage/customization?id=` + item.id )">
							<!-- mode="scaleToFill" v-if="index === 0" -->
							<uv-image  src="/static/images/shiyongtongkuan1.png" width="98rpx"
								height="32rpx" mode="scaleToFill"></uv-image>
						<!-- 	<uv-image v-else src="/static/images/shiyongtongkuan.png" width="98rpx" height="32rpx"
								mode="scaleToFill"></uv-image> -->
						</view>
					</view>
					
				</view>
			</view>
			<view class=" mt-40" v-else-if="data.kindIndex == 2">
				<view
					style="font-size: 30rpx;color: rgb(204, 204, 204);height: 40vh;display: flex;align-items: center;justify-content: center;width: 100%;">
					功能暂未开放</view>
			</view>
			<view class=" mt-40" v-else
				style="width: 100%;">
				<view
					style="font-size: 30rpx;width: 100%;text-align: center;  color: rgb(204, 204, 204);height: 35vh;display: flex;align-items: center;justify-content: center;width: 100%;">
					暂 无 数 据</view>
			</view>
			<view v-if="!data.hasMoreData">没有更多数据了</view>
			
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive,onMounted } from 'vue';
	import { getWindowHeight } from '@/pages/util/getHeight';
	import { onShow } from '@dcloudio/uni-app';
	import { baseURL } from '@/utils/config.ts';
	import { get, post } from '@/utils/request';
	import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
	import useLoginStore from '@/pinia-store/userInfoStore';
	const useLogin = useLoginStore();
	// console.log('useLoginuseLogin',useLogin);
	/** @name 数据 */
	const data = reactive({
		itemList: [{ name: '热门' }, { name: '脉星人' }, { name: '特效' }, { name: '我的创作' }],
		kindIndex: 0,
		list: [],
		hasMoreData: true,
		isLoading: false,
		total: 0,
		pages: 0,
		pageNo: 1
	});
	const loadMoreData = () => {
		if (!data.isLoading && data.hasMoreData) {
	
			console.log("有没有加载方法")
			if (data.pageNo < data.pages) {
				data.pageNo++;
				clickList(data.kindIndex)
			} else {
				data.hasMoreData = false
				setTimeout(() => {
					data.hasMoreData = true
				}, 800)
			}
		}
	};
	/** @name xxx */
	function getUserInfo() { }

	/** @name 切换选择 */
	function clickList(e) {
		console.log(e.index)
		data.pageNo = 0
		data.kindIndex = e.index;
		if( e.index == 0){
			fetchData()
		}else
		if( e.index == 1){
			getListFun()
		}else
		if( e.index == 3){
			getPopularListFun()
		}
	}
	const fetchData = async () => {
		try {
			const response = await get<{
			pageNo : Number,
			pageSize : Number,
			type : Number
			}>('/customized/getPopularList', {pageNo: data.pageNo, pageSize: 1, type: 3 });
			if (response) {
				data.pages = response.result.pages
				data.total = response.result.total
				
				data.list = response.result.records
			}

		} catch (error) {
			console.error(error);
		}
	};
	const getListFun = async () => {
		try {
			const response = await get<{
			pageNo : Number,
			pageSize : Number,
			type : Number
			}>('/maixing/getList', {pageNo: data.pageNo, pageSize: 10, type: 2 });
			if (response) {
				data.pages = response.result.pages
				data.total = response.result.total
				
				data.list = response.result.records
			}
	
		} catch (error) {
			console.error(error);
		}
	};
	const getPopularListFun = async () => {
		try {
			const response = await get<{
			pageNo : Number,
			pageSize : Number,
			type : Number
			}>('/customized/getPopularList', {pageNo: data.pageNo, pageSize: 10, type: 2 });
			if (response) {
				data.pages = response.result.pages
				data.total = response.result.total
				
				data.list = response.result.records
			}
	
		} catch (error) {
			console.error(error);
		}
	};
	
	
	
	/** @name xxx */
	async function 展示() { }
	defineExpose({
	  fetchData,
	  loadMoreData
	});
	// onShow(() => {
	// 	fetchData()
	// });
	onMounted(() => {
	 	fetchData()
	 });
</script>

<style scoped lang="scss">
	// :deep(.checklist-box) {
	// 	//  模版
	// }

	.listClass {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 分为三列，每列宽度相等 */
		gap: 24rpx;
	}
</style>